<template>
  <div class="order-address" v-if="list && list.length > 1">
    <div class="title" v-if="list[0].value > 0 || list[1].value > 0">
      请选择配额:
    </div>
    <div v-else style="text-align: left">暂无配额...</div>
    <div class="address">
      <ul class="list">
        <template v-for="(item, index) in list">
          <li
            class="list-item"
            :key="index"
            @click="selected(item)"
            v-if="item.value > 0"
          >
            <div class="selected">
              <!-- <cube-checkbox v-model="item.selected" :option="{label: ''}" @input="selectedAddress(item)" />-->
              <cube-checkbox v-model="item.selected" :option="{label: ''}" />
            </div>
            <div class="desc">{{item.label}} ({{item.value}})个</div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Quota',
  props: ['list'],
  methods: {
    selected(item) {
      this.$emit('selectedQuota', item)
    }
  }
}
</script>

<style scoped lang="stylus">
.order-address
  margin 10px
  padding 15px 10px
  background white
  border-radius 10px
  .title
    font-weight 700
    text-align left
    padding-bottom 10px
  .nothing
    height 25px
    line-height 25px
    span
      color red
  .address
    margin 10px
    //position relative
    .list
      .list-item
        margin-bottom 10px
        line-height 1.2em
        display flex
        border-bottom 1px solid #eee
        padding 10px 0
        &:last-child
          border none
        .selected
          width 50px
          font-size 20px
          //background red
          //padding-top 0px
        .desc
          flex 1
          text-align left
          padding-left 10px
          display flex
          align-items center
          font-size 14px
</style>
